<template>
  <div class="about-page">
    <nav-unit />
    <div class="center-content">
      <self-introduction />
      <div class="information">
        <h1>网站相关</h1>
        <div class="column" v-for="(column,index) in columns" :key="index">
          <el-divider />
          <h4><span>Q: </span>{{column.question}}</h4>
          <p><span>A: </span>{{column.answer}}</p>
        </div>
      </div>
    </div>
    <footer-unit />
  </div>
</template>

<script>
import NavUnit from '@/components/Navigation/NavUnit.vue'
import SelfIntroduction from '@/components/Author/SelfIntroduction.vue'
import FooterUnit from '@/components/Footer/FooterUnit.vue'

export default {
  name: 'AboutPage',
  components: { 
    NavUnit,
    SelfIntroduction,
    FooterUnit 
  },
  setup() {
    let columns = [
      {question: '这个网站是什么？', answer: '作者用来练手的小玩具'},
      {question: '网站的开发环境是？', answer: '由于技术升级了，玩具配置超绝提升，前端采用Vue3配合element-plus，后端采用node.js完成'},
      {question: '项目源码地址？', answer: '有人开源才有的借鉴(抄)，gitee仓库地址https://gitee.com/yuuki-yuuna/vue-website(懒得做链接了)'},
      {question: '登录注册有用吗?', answer: '没有用,只是为了禁止别人编辑文章做的(只有某个人享受到了,太坏了)'},
      {question: '作者吐槽', answer: '感觉写来写去写了一堆垃圾，自己也没脸说什么'},
      {question: '结束语', answer: '个人认为目前还像个人样，总之还请大家多多关照'}
    ]

    return {
      columns
    }
  }
}
</script>

<style scoped>
  .center-content {
    display: flex;
  }
  .information {
    width: 800px;
    margin: 0 50px;
    padding: 0 20px;
    box-sizing: border-box;
    box-shadow: var(--el-box-shadow-lighter);
  }
  h1 {
    text-align: center;
    margin: 10px 0;
  }
  .column {
    margin-bottom: 10px;
  }
  span {
    font-weight: 700;
  }
  p {
    padding: 5px 0;
  }
</style>